<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 400px;
      height: 200px;
      border: 1px solid #ccc;
      margin: 100px auto;
      text-align: center;
    }

    dl {
      width: 100px;
      float: left;
      line-height: 30px;
    }

    dt {
      font-size: 18px;
      font-weight: 700;
    }

    dd {
      border-bottom: 1px dashed #ccc;
    }
  </style>
</head>

<body>
  <div id="box"></div>

  <script src="js/common.js"></script>
  <script>
    var datas = [
      {
        title: '品牌',
        items: ["苹果", "华为", "oppo", "三星"]
      },
      {
        title: '水果',
        items: ["橘子", "草莓", "香蕉", "柚子"]
      },
      {
        title: '鲜花',
        items: ["玫瑰", "薰衣草", "百合", "满天星"]
      }
    ]
    var box = my$("box");

    /*
      1.模拟数据库的数据 创建datas
      2.根据datas的中数据 循环创建 外出壳子 dl
      3. 根据 datas[i].title创建 dt 并添加到dl中
      4.根据 datas[i].items循环 创建 dd 并追加到dl中
      5.将创建的数据dl追加到box中
    */

    for (var i = 0; i < datas.length; i++) {
      // 创建dl
      var dl = document.createElement("dl");
      // 创建 dt
      var dt = document.createElement("dt");
      // 填充dt 
      dt.innerText = datas[i].title;
      // 将dt追加到dl中
      dl.appendChild(dt);
      // 创建 dd
      var data = datas[i].items;
      for (var k in data) {
        var dd = document.createElement("dd");
        dd.innerText = data[k];
        dl.appendChild(dd);
      }
      // 将dl添加到box中
      box.appendChild(dl);
    }


  </script>
</body>

</html>